<template>
  <view :style="getBackgroundStyle()">
    <seg-content-group class="login-content" v-if="!judge(mode.mobileNoLeft)">
      <template>
        <seg-login-detail></seg-login-detail>
      </template>
    </seg-content-group>
    <view class="login-content" v-else>
      <seg-login-detail></seg-login-detail>
    </view>
  </view>
</template>

<script>
import SegContentGroup from "../../components/seg-content-group/seg-content-group";
import statusJudge from "../../utils/monitor/statusJudge";
import appConfig from "../../api/appConfig";
import SegLoginDetail from "../../components/seg-login-detail/seg-login-detail";
export default {
  name: "login",
  components: {SegLoginDetail, SegContentGroup},
  mixins: [statusJudge],
  data() {
    return {
      mode: appConfig.calMode
    }
  },
  methods: {
    getBackgroundStyle(){
      if(!this.judge(this.mode.mobileNoLeft)){
        return {
          'height': 'calc(100vh)',
          'background-image': 'url("/static/loginBackground.jpg")',
          'background-size': 'cover'
        }
      }else{
        return {'height': 'calc(100vh)'}
      }
    }
  }
}
</script>

<style scoped>

  .login-content {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    justify-content: center;
    margin: 0 auto;
  }


</style>
